@import "compass";

body{
	@media #{$phone}{
		.#{$namespace}pagebody{
			min-height: 100vh;										// alternative for browswers who cannot do calculations
			min-height: calc(100vh - (#{$banner-height} * 3));		// viewport minus the three top banners
		}
		
		&.toolsNav--displayed{
			// hide the tool body
			.#{$namespace}pagebody {
				#content {
					display: none;
				}
			}
			// make the banner stick to the top on scroll when the tool menu is visible
			.#{$namespace}mainHeader {
				position: absolute;
				top: -$banner-height;

				.#{$namespace}topHeader {
					position: relative;
					padding-top: 0 !important;

					.#{$namespace}headerLogo {
						position: relative;
					}
				}
			}

			// show the tool menu
			#toolMenuWrap{
				display: block;			// restore the tool menu that was removed when hidden to reduce the height of the page when it isn't visible
				width: 100%;
				min-height: auto; 		// to allow the bottom of the tool menu to appear when doesn't have too many tools
				box-shadow: var(--elevation-4dp);
				left: 0;
				z-index: 1001;

				@if $tool-menu-icon-on-left {
					background-color: var(--tool-background-color);
				}
				#toolSubsitesContainer{
					overflow-y:auto;
					height:100%;
				}

				.Mrphs-toolsNav__menuitem--title{
					display: inline-block;
					letter-spacing: 0px;
					border: 0px none;
					@include border-radius( 0 );
					box-shadow: none;
				}
				> h1.skip{
					display: block;
					position: relative;
					top: 0;
					left: 0;
					height: 1em;
					padding: 0.6em 0 1.6em 0.5em;
					line-height: 1.05;
					font-size: 1em;
					font-weight: 300;
					background: var(--tool-background-color);
					margin: 0;
					border-bottom:  1px solid var(--sakai-border-color);
					position: relative;
				}
			}
			#toolMenu, #subSites{
				@if $tool-menu-icon-on-left {
					background-color: var(--sites-nav-menu-item-background);
				}
				ul{
					list-style: none;
					padding:0;
					li{
						@if $tool-menu-icon-on-left {
							display: block;
							border-bottom: 1px solid var(--tool-menu-item-separator-color);
							width: 100%;
							white-space: nowrap;
							overflow: hidden;

							&.is-current {
	
								.#{$namespace}toolsNav__menuitem--link {
									background: var(--sites-nav-menu-item-active-background);
								}
							}

							.#{$namespace}toolsNav__menuitem--link {
								background-color: var(--sites-nav-menu-item-background);

								&:hover,
								&:focus,
								&:active {
									background-color: var(--sites-nav-menu-item-active-background);
								}
							}

						}
						@else {
							border-left: 2px var(--sakai-background-color-2);
							display: inline-block;
							margin: -4px -4px 0px 0; //FIX for inline-block extra space.
							width: calc( 25% - 1px );
						}
						
						&.#{$namespace}collapseTools{
							display: none;
						}
						.#{$namespace}toolsNav__subnav{
							li{
								a{
						  			@media #{$phone}{
										padding: 0.6em 0 0.6em 2em;
									}
								}
							}
						}
						.#{$namespace}toolsNav__category {				
							display: block;
						}
					}
				}
			}
			#portalMask {
				background: transparent;
			}
		}
		&.sitesNav--displayed{

			.Mrphs-mainHeader{
				&.is-maximized{
					.siteNavWrap{
						background: var(--sakai-primary-color-1);
						margin-top: -3em;
						min-height: 100%;
						padding-top: 3em;
						position: fixed;
						width: 85%;
						box-shadow: var(--elevation-8dp);
					}
				}
			}


			#toolMenuWrap{
				left: #{  $tool-menu-width * -1 };
			}
			#linkNav{
				background: transparent;
				display: block;
				max-height: 100%;
				overflow: auto;
				ul{
					li.#{$namespace}sitesNav__menuitem {
						display: block;
						margin: 1.5em;
						&.is-selected{
							a{
								background: var(--sakai-background-color-1);
							}
						}
						a{
							background: var(--sakai-background-color-2);
							border-right: 0px none;
						}
						&.#{$namespace}sitesNav__menuitem--myworkspace{
							background: var(--sakai-primary-color-1);
							margin: 0 0 0 0;
							a{
								background: var(--sakai-primary-color-1);
							}
						}
					}
					&.#{$namespace}sitesNav__menu{
						margin: 1em 0.8em 0 1.2em;
					}
				}
			}
			.#{$namespace}mainHeader{
				.#{$namespace}headerLogo{
					width: 75%;
					display: block;
					position: absolute;
					z-index: 40;
					margin: 0 0 0 4em;
					.#{$namespace}headerLogo--institution{
						display: inline-block;
						margin: 0.6em 0em 0 1em;
					}
				}
			}
		}
	}
}

// Viewport Helpers
// - these are hidden elements that the JavaScript can query
//   to determine the current viewport breakpoint
body {
  ##{$namespace}viewport-helpers {
    .phone, .tablet, .desktop {
      display: none;

      height: 0;			// removed in SAK-40294 because it caused an extra pixel of unnecessary page height
      width: 1px;
      overflow: hidden;
      position: absolute;
      left: -1000000px;
    }
    @media #{$phone} {
      .phone {
        display: block;
      }
    }
    @media #{$tablet} {
      .tablet {
        display: block;
      }
    }
    @media #{$desktop} {
      .desktop {
        display: block;
      }
    }
  }
}
